import {
    AfterViewInit,
    Component,
    EventEmitter,
    Input,
    OnChanges,
    OnDestroy,
    OnInit,
    Output,
    Renderer2,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ConfigModule } from 'src/app/config.module';
import { ActivatedRoute, Router } from '@angular/router';
import { NzModalService } from 'ng-zorro-antd/modal';
import { Store } from '@ngxs/store';
import { DragDrop } from '@angular/cdk/drag-drop';
import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree';
import { NgxPermissionsService } from 'ngx-permissions';

export interface TreeNode {
    key: string;
    title: string;
    isLeaf: boolean;
    expanded: boolean;
    children: TreeNode[];
}

@Component({
    selector: 'app-check-tree',
    templateUrl: './check-tree.component.html',
    styleUrls: ['./check-tree.component.scss']
})
export class CheckTreeComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {

    @ViewChild('modalContent') modalContent;
    @ViewChild('modalFooter') modalFooter;

    @Input()
    allTree: Array<NzTreeNode> = []; //菜单树的数据
    @Input()
    defaultCheckedKeys: Array<string> = []; //默认选中的key
    @Output()
    defaultCheckedKeysChange = new EventEmitter<Array<string>>();

    @Input() maxHeight: string = 'auto';

    modalLoadingState: boolean;
    saveLoadingState: boolean;
    treeSearchValue = ''; //树搜索关键字
    constructor(
        public _config: ConfigModule,
        private _formBuilder: FormBuilder,
        private _router: Router,
        private _nzModalService: NzModalService,
        private _activatedRoute: ActivatedRoute,
        private _renderer2: Renderer2,
        private _dragDrop: DragDrop,
        private _store: Store,
        private _ngxPermissionsService: NgxPermissionsService
    ) {
    }

    ngOnChanges(changes: SimpleChanges): void {

        if (changes.hasOwnProperty('allTree')){
            if (this.allTree){
                this.allTree = [...this.allTree];
                // nzData 值异步获取变化后重新渲染一下属性
                this.defaultCheckedKeys = [...this.defaultCheckedKeys];
            }
        }

    }

    ngOnInit() {
    }

    ngAfterViewInit() {
    }

    ngOnDestroy() {
    }

    /**
     * 选中
     * @param event
     */
    nzCheck(event: NzFormatEmitEvent): void {
        this.defaultCheckedKeys = event.keys;
        this.defaultCheckedKeysChange.emit(this.defaultCheckedKeys);
    }
}
